<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body style="padding:25px;">
    <!-- data-toggle="modal" 触发类型:模态框modal -->
    <!-- data-target="#myModal" 触发的节点 -->
    <!-- data-backdrop="static" 点击黑灰色背景，不会关闭模态框 -->
    <button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框</button>

    <!-- 1.声明定义模态框组件 -->
    <div class="modal" id="myModal" data-backdrop="static">
         <!-- 2.窗口声明 -->
         <div class="modal-dialog">
             <!-- 3.内容声明 -->
             <div class="modal-content">

                 <!-- 4.1 框的标题 -->
                  <div class="modal-header">
                      <button class="close" data-dismiss="modal">
                          <span>&times;</span>
                      </button>
                      <h4 class="modal-title">友情提示</h4>
                  </div>
                  <!-- 4.2 框内信息 -->
                  <div class="modal-body">
                      服务器错误，请稍后再试！
                      <hr>
                      <img src="img/1.jpg" width="200px;">
                      <hr>
                      <input type="text">
                  </div>
                  <!-- 4.3 框的按钮 -->
                  <div class="modal-footer">
                       <button class="btn btn-info">确定</button>
                       <button class="btn btn-default" data-dismiss="modal">取消</button>
                  </div>

             </div>
         </div>
    </div>
</body>
</html>